<template>
  <div class="register">
    <router-link to="/login"><i class="fa-icon-angle-double-left"></i>返回</router-link>
    <h1>新用户注册</h1>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="账号" prop="userName">
        <el-input v-model.trim="ruleForm.userName" placeholder="请输入注册账号" ref="userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model.trim="ruleForm.checkPass" autocomplete="off" show-password placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    // 验证账号
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入账号'))
      } else if (value.length < 4 || value.length > 12) {
        return callback(new Error('账号必须为4-12位'))
      } else if (!/^[a-zA-Z]\w+$/.test(value)) {
        return callback(new Error('账号字母开头，接数字字母下划线'))
      } else {
        callback()
      }
    }
    // 验证密码
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        return callback(new Error('密码至少为6位'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 验证确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        userName: '',
        password: '',
        checkPass: ''
      },
      rules: {
        userName: [
          { required: true, validator: checkUser, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    // 刷新后立马获得焦点
    this.$refs.userName.focus()

    // 回车提交
    window.onkeydown = (event) => {
      if (event.keyCode === 13) this.submitForm('ruleForm')
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { userName, password } = this.ruleForm
          this.$http.post('user/register', { userName, password }).then(res => {
            // 当用户名已存在
            if (res.err > 0 && res.err === 1002) {
              // 清空用户名。并获取焦点
              this.ruleForm.userName = ''
              this.$refs.userName.focus()
              this.$message({
                message: res.desc,
                type: 'error',
                duration: 2000
              })
            } else {
              // 跳转回登录页面
              this.$router.push('login')
              this.$message({
                message: res.desc,
                type: 'success',
                duration: 2000
              })
            }
          }).catch(err => err)
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .register {
    position: fixed;
    width: 350px;
    height: 350px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 16px  rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 20px 30px;
    h1 {
      text-align: center;
      margin-bottom: 15px;
    }
    a {
      user-select: none;
      i {
       font-size: 16px;
      }
    }
  }
</style>
